﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
This example shows how to display a shapefile in a web page using the ESRI ArcGIS API for JavaScript.
See "http://help.arcgis.com/en/webapi/javascript/arcgis/"
Original code is the Custom Layer (WMTS) sample 
-->
<html lang="en">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>
      ESRI javascript API Shapefile Demo using Easy GIS .NET to deliver tiles
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"/>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
      #citationInfo{
        position:absolute; 
        color:black;
        font-weight:bold;
        font-size:12pt;
        left:10px;
        bottom:10px;
        z-Index:999;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      
      function init() {
        initLayer();
        // zoom to Medford, Oregon, U.S.
        var extent = new esri.geometry.Extent(-13686470.64, 5203832.72, -13669272.31, 5215298.28, new esri.SpatialReference({
          wkid: 3857
        }));
        
        //adjust the map extent so we can see more of our displayed shapefile
        extent = extent.expand(500);
        extent = extent.offset(extent.getWidth()/2, 0);        
        var map = new esri.Map("map", {
          extent: extent
        });
 
        //resize map when browser resizes
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        // add basemap World_Street_Map
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);
 
        // add WMTS layer http://v2.suite.opengeo.org/geoserver/gwc/service/wmts        		        			  				
        //EGIS mod 
        map.addLayer(new egis.TileLayer());
 
      }
 
 
 
      function initLayer() {
        dojo.declare("egis.TileLayer", esri.layers.TiledMapServiceLayer, { // create TileLayer by extending esri.layers.TiledMapServiceLayer
          constructor: function() {
            this.spatialReference = new esri.SpatialReference({
              wkid: 3857
            });
            //egis modification 1
            this.opacity = 0.5;
            this.initialExtent = new esri.geometry.Extent(-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789, this.spatialReference);
            this.fullExtent = new esri.geometry.Extent(-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789, this.spatialReference);
            //
            this.tileInfo = new esri.layers.TileInfo({
              "dpi": "90.71428571427429",
              "format": "image/png",
              "compressionQuality": 0,
              "spatialReference": {
                "wkid": "3857"
              },
              "rows": 256,
              "cols": 256,
              "origin": {
                "x": -20037508.34,
                "y": 20037508.34
              },
 
              // Scales in DPI 96
              "lods": [{
                "level": 0,
                "scale": 591657527.591555,
                "resolution": 156543.033928
              }, {
                "level": 1,
                "scale": 295828763.795777,
                "resolution": 78271.5169639999
              }, {
                "level": 2,
                "scale": 147914381.897889,
                "resolution": 39135.7584820001
              }, {
                "level": 3,
                "scale": 73957190.948944,
                "resolution": 19567.8792409999
              }, {
                "level": 4,
                "scale": 36978595.474472,
                "resolution": 9783.93962049996
              }, {
                "level": 5,
                "scale": 18489297.737236,
                "resolution": 4891.96981024998
              }, {
                "level": 6,
                "scale": 9244648.868618,
                "resolution": 2445.98490512499
              }, {
                "level": 7,
                "scale": 4622324.434309,
                "resolution": 1222.99245256249
              }, {
                "level": 8,
                "scale": 2311162.217155,
                "resolution": 611.49622628138
              }, {
                "level": 9,
                "scale": 1155581.108577,
                "resolution": 305.748113140558
              }, {
                "level": 10,
                "scale": 577790.554289,
                "resolution": 152.874056570411
              }, {
                "level": 11,
                "scale": 288895.277144,
                "resolution": 76.4370282850732
              }, {
                "level": 12,
                "scale": 144447.638572,
                "resolution": 38.2185141425366
              }, {
                "level": 13,
                "scale": 72223.819286,
                "resolution": 19.1092570712683
              }, {
                "level": 14,
                "scale": 36111.909643,
                "resolution": 9.55462853563415
              }, {
                "level": 15,
                "scale": 18055.954822,
                "resolution": 4.77731426794937
              }, {
                "level": 16,
                "scale": 9027.977411,
                "resolution": 2.38865713397468
              }, {
                "level": 17,
                "scale": 4513.988705,
                "resolution": 1.19432856685505
              }, {
                "level": 18,
                "scale": 2256.994353,
                "resolution": 0.597164283559817
              }, {
                "level": 19,
                "scale": 1128.497176,
                "resolution": 0.298582141647617
 
              }
 
              ]
 
            });
            this.loaded = true;
            this.onLoad(this);
          },
 
          getTileUrl: function(level, row, col)
          {
          //  return "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts" + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile" + "&LAYER=medford:zoning" + "&STYLE=_null" + "&FORMAT=image/png" + "&TILEMATRIXSET=EPSG:900913" + "&TILEMATRIX=EPSG:900913:" + level + "&TILEROW=" + row + "&TILECOL=" + col;
          
          var x = col;
		var y = row;
		var z = level;
        var renderType = 0;
		var s = "ExampleMapHandler.ashx?tx="+x+"&ty="+y+"&zoom="+z+"&mapid=none" + "&version=6.4&rendertype="+renderType;
		return s;
          
          
          }
        });
      }
 
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" > 
        <div id="citationInfo">
          TileLayer overlay served by <a href="http://www.easygisdotnet.com">Easy GIS .NET</a>
        </div>    
      </div>
    </div>
  </body>
 
</html>

